<template>
   <div>
       <el-button type="text" @click="dialogFormVisible = true">新增</el-button>
<el-dialog title="新增请假单" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item :label-width="formLabelWidth" >
      <el-input v-model="form.name" autocomplete="off" placeholder="请假人"></el-input>
    </el-form-item>
    <el-form-item  :label-width="formLabelWidth">
      <el-select v-model="form.region" placeholder="请请假类型">
        <el-option label="事假" value="事假"></el-option>
        <el-option label="病假" value="病假"></el-option>
      </el-select>
    </el-form-item>
      <el-form-item label=""> 
            <el-date-picker class="f1" v-model="value1"  type="date"  placeholder="选择开始日期"> </el-date-picker>
          <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
             <el-date-picker class="f2" v-model="value2" type="date" placeholder="选择截至日期"></el-date-picker>      
        </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>
   </div>
</template>

<script>
    export default {
    data() {
      return {
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',
     formInline: {
          user: '',
          region: '',
          grouping:'',
          whether:'',
        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2:'',
      };
    }
  };
</script>

<style lang="scss" scoped>
.el-input,.el-select{
    width: 500px;
    margin-left: -50px;
}
.f1,.f2{
    width: 230px;
}
.f1{
    margin-left:55px;
}
.f2{
    margin-left: 10px;
}
</style>